import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Tabs from '../views/Tabs.vue'
import WeRead from '../views/WeRead.vue'
import Event from '../views/Event.vue'
import Contextmenu from '../views/Contextmenu.vue'
import Form from '../views/Form.vue'
import Validate from '../views/Validate.vue'
import Slider from '../views/Slider.vue'
import Computed from '../views/Computed.vue'
import Watch from '../views/Watch.vue'
import ScrollLoad from '../views/ScrollLoad.vue'
import PullRefresh from '../views/PullRefresh.vue'
import Todos from '../views/Todos.vue'
import AlbumList from '../views/AlbumList.vue'
import VModel from '../views/VModel.vue'
import Life from '../views/Life.vue'
import Main from '../views/admin/Main.vue'
import List from '../views/admin/List.vue'
import Detail from '../views/admin/Detail.vue'
import StockList from '../views/stock/List.vue'
import StockDetail from '../views/stock/Detail.vue'

// 安装
Vue.use(VueRouter)

const routes = [
  //  一级路由路径加/, 子路由不加
  {
    path: '/main',
    component: Main,
    // 给 Main 页面组件定义子路由
    // 子路由/嵌套路由的路径 path 前面不需要加/
    children: [{
      path: '',
      redirect: 'list'
    }, {
      path: 'list',
      component: List
    }, {
      path: 'detail',
      component: Detail
    }]
  },
  // 路由跳转
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  // 路由：路径 path 和页面组件 component 的对应关系
  {
    path: '/tabs',
    name: 'Tabs',
    component: Tabs
  },
  {
    path: '/weread',
    name: 'WeRead',
    component: WeRead
  },
  {
    path: '/event',
    component: Event
  },
  {
    path: '/contextmenu',
    component: Contextmenu
  },
  {
    path: '/form',
    component: Form
  },
  {
    path: '/validate',
    component: Validate
  },
  {
    path: '/slider',
    component: Slider
  },
  {
    path: '/computed',
    component: Computed
  },
  {
    path: '/watch',
    component: Watch
  },
  {
    path: '/scrollload',
    component: ScrollLoad
  },
  {
    path: '/pullrefresh',
    component: PullRefresh
  },
  {
    path: '/todos',
    component: Todos
  },
  {
    path: '/component',
    // 异步路由, 文件会单独打包, 当访问这个路由的时候才加载对应的文件；首屏渲染速度; webpack 支持的语法
    component: () => import('../views/Component.vue'),
  },
  {
    path: '/albumlist',
    component: AlbumList
  },
  {
    path: '/vmodel',
    component: VModel
  },
  {
    path: '/life',
    component: Life
  },
  {
    path: '/stock/list',
    name: 'stockList',
    component: StockList,
    children: [
      {
        // path: 'detail/:id',
        name: 'stockDetail',
        path: ':id',
        component: StockDetail
      }
    ]
  },
  {
    path: '/basket/index',
    component: () => import('@/views/basket/Index.vue')
  },
  {
    path: '/basket-vuex/index',
    component: () => import('@/views/basket-vuex/Index.vue')
  }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

export default router
